
.shujuzhili-middle {
  position: relative;
  -webkit-animation: cwAnm2 1.5s linear;
          animation: cwAnm2 1.5s linear;
}
@-webkit-keyframes cwAnm2 {
0%,
  30% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 0;
}
85% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 1;
}
100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
}
}
@keyframes cwAnm2 {
0%,
  30% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 0;
}
85% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 1;
}
100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
}
}
.shujuzhili-middle .universe {
  position: relative;
  width: 23rem;
  height: 13rem;
  margin: 0 auto;
}
.shujuzhili-middle .universe .wave {
  position: absolute;
  top: 7.5rem;
  left: 50%;
}
.shujuzhili-middle .universe .wave li {
  position: absolute;
  top: 50%;
  left: 50%;
}
.shujuzhili-middle .universe .wave li:before {
  display: block;
  content: "";
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: rgba(40, 65, 131, 0.5) 0.12rem solid;
  border-radius: 22rem;
}
.shujuzhili-middle .universe .wave li:nth-child(1) {
  width: 22rem;
  height: 22rem;
  -webkit-transform: translate(-50%, -50%) perspective(40rem) rotatex(77.5deg);
          transform: translate(-50%, -50%) perspective(40rem) rotatex(77.5deg);
}
.shujuzhili-middle .universe .wave li:nth-child(1):before {
  -webkit-box-shadow: 0 0 0.1rem #00367a, 0 0 0.1rem #00367a inset;
          box-shadow: 0 0 0.1rem #00367a, 0 0 0.1rem #00367a inset;
  -webkit-animation: unWave 5s linear infinite;
          animation: unWave 5s linear infinite;
}
.shujuzhili-middle .universe .wave li:nth-child(2) {
  width: 21.2rem;
  height: 21.2rem;
  -webkit-transform: translate(-50%, -50%) perspective(40rem) rotatex(77deg);
          transform: translate(-50%, -50%) perspective(40rem) rotatex(77deg);
}
.shujuzhili-middle .universe .wave li:nth-child(2):before {
  border-color: rgba(255, 255, 255, 0.5);
  -webkit-box-shadow: 0 0 0.1rem #fff, 0 0 0.1rem #fff inset;
          box-shadow: 0 0 0.1rem #fff, 0 0 0.1rem #fff inset;
  -webkit-animation: unWave 5s linear infinite 1s;
          animation: unWave 5s linear infinite 1s;
}
.shujuzhili-middle .universe .wave li:nth-child(3) {
  width: 16.6rem;
  height: 16.6rem;
  -webkit-transform: translate(-50%, -50%) perspective(40rem) rotatex(77.5deg);
          transform: translate(-50%, -50%) perspective(40rem) rotatex(77.5deg);
}
.shujuzhili-middle .universe .wave li:nth-child(3):before {
  -webkit-box-shadow: 0 0 0.1rem #00367a, 0 0 0.1rem #00367a inset;
          box-shadow: 0 0 0.1rem #00367a, 0 0 0.1rem #00367a inset;
  -webkit-animation: unWave 5s linear infinite 2s;
          animation: unWave 5s linear infinite 2s;
}
.shujuzhili-middle .universe .wave li:nth-child(4) {
  width: 15.8rem;
  height: 15.8rem;
  -webkit-transform: translate(-50%, -50%) perspective(40rem) rotatex(77deg);
          transform: translate(-50%, -50%) perspective(40rem) rotatex(77deg);
}
.shujuzhili-middle .universe .wave li:nth-child(4):before {
  border-color: rgba(255, 255, 255, 0.5);
  -webkit-box-shadow: 0 0 0.1rem #fff, 0 0 0.1rem #fff inset;
          box-shadow: 0 0 0.1rem #fff, 0 0 0.1rem #fff inset;
  -webkit-animation: unWave 5s linear infinite 3s;
          animation: unWave 5s linear infinite 3s;
}
@-webkit-keyframes unWave {
0% {
    opacity: 0;
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
}
50% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
}
100% {
    opacity: 0;
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
}
}
@keyframes unWave {
0% {
    opacity: 0;
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
}
50% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
}
100% {
    opacity: 0;
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
}
}
.shujuzhili-middle .universe .firefly {
  position: absolute;
  top: 7.5rem;
  left: 50%;
}
.shujuzhili-middle .universe .firefly li {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.1rem;
  height: 0.1rem;
  margin: -0.05rem 0 0 -0.05rem;
  background: #2691ff;
  border-radius: 0.1rem;
  -webkit-box-shadow: 0 0 0.1rem #2691ff;
          box-shadow: 0 0 0.1rem #2691ff;
}
.shujuzhili-middle .universe .firefly li:nth-child(even) {
  background: #a4d7ff;
}
.shujuzhili-middle .universe .firefly li:nth-child(1) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro1 4s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro1 4s linear infinite;
}
.shujuzhili-middle .universe .firefly li:nth-child(2) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro2 5s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro2 5s linear infinite;
}
.shujuzhili-middle .universe .firefly li:nth-child(3) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro3 6s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro3 6s linear infinite;
}
.shujuzhili-middle .universe .firefly li:nth-child(4) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro4 7s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro4 7s linear infinite;
}
.shujuzhili-middle .universe .firefly li:nth-child(5) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro5 8s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro5 8s linear infinite;
}
.shujuzhili-middle .universe .firefly li:nth-child(6) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro6 4s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro6 4s linear infinite;
}
.shujuzhili-middle .universe .firefly li:nth-child(7) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro7 5s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro7 5s linear infinite;
}
.shujuzhili-middle .universe .firefly li:nth-child(8) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro8 6s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro8 6s linear infinite;
}
.shujuzhili-middle .universe .firefly li:nth-child(9) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro9 7s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro9 7s linear infinite;
}
.shujuzhili-middle .universe .firefly li:nth-child(10) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro10 8s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro10 8s linear infinite;
}
.shujuzhili-middle .universe .firefly li:nth-child(11) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro11 4s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro11 4s linear infinite;
}
.shujuzhili-middle .universe .firefly li:nth-child(12) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro12 5s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro12 5s linear infinite;
}
.shujuzhili-middle .universe .firefly li:nth-child(13) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro13 6s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro13 6s linear infinite;
}
.shujuzhili-middle .universe .firefly li:nth-child(14) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro14 7s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro14 7s linear infinite;
}
.shujuzhili-middle .universe .firefly li:nth-child(15) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro15 8s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro15 8s linear infinite;
}
.shujuzhili-middle .universe .firefly li:nth-child(16) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro16 4s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro16 4s linear infinite;
}
.shujuzhili-middle .universe .firefly li:nth-child(17) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro17 5s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro17 5s linear infinite;
}
.shujuzhili-middle .universe .firefly li:nth-child(18) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro18 6s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro18 6s linear infinite;
}
.shujuzhili-middle .universe .firefly li:nth-child(19) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro19 7s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro19 7s linear infinite;
}
.shujuzhili-middle .universe .firefly li:nth-child(20) {
  -webkit-animation: fireflyFrames 2s linear infinite,fireflyFro20 8s linear infinite;
          animation: fireflyFrames 2s linear infinite,fireflyFro20 8s linear infinite;
}
@-webkit-keyframes fireflyFrames {
0%,
  100% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
}
50% {
    -webkit-transform: scale(1);
            transform: scale(1);
}
}
@keyframes fireflyFrames {
0%,
  100% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
}
50% {
    -webkit-transform: scale(1);
            transform: scale(1);
}
}
@-webkit-keyframes fireflyFro1 {
0% {
    opacity: 0;
    top: 0;
    left: 0;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -6rem;
    left: -3rem;
}
}
@keyframes fireflyFro1 {
0% {
    opacity: 0;
    top: 0;
    left: 0;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -6rem;
    left: -3rem;
}
}
@-webkit-keyframes fireflyFro2 {
0% {
    opacity: 0;
    top: 0;
    left: 0.1rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -6rem;
    left: -4rem;
}
}
@keyframes fireflyFro2 {
0% {
    opacity: 0;
    top: 0;
    left: 0.1rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -6rem;
    left: -4rem;
}
}
@-webkit-keyframes fireflyFro3 {
0% {
    opacity: 0;
    top: 0;
    left: -0.1rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -6rem;
    left: 4.5rem;
}
}
@keyframes fireflyFro3 {
0% {
    opacity: 0;
    top: 0;
    left: -0.1rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -6rem;
    left: 4.5rem;
}
}
@-webkit-keyframes fireflyFro4 {
0% {
    opacity: 0;
    top: 0;
    left: 0.15rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -6rem;
    left: -5rem;
}
}
@keyframes fireflyFro4 {
0% {
    opacity: 0;
    top: 0;
    left: 0.15rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -6rem;
    left: -5rem;
}
}
@-webkit-keyframes fireflyFro5 {
0% {
    opacity: 0;
    top: 0;
    left: 0rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -6rem;
    left: -1rem;
}
}
@keyframes fireflyFro5 {
0% {
    opacity: 0;
    top: 0;
    left: 0rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -6rem;
    left: -1rem;
}
}
@-webkit-keyframes fireflyFro6 {
0% {
    opacity: 0;
    top: 0;
    left: 0rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -5.5rem;
    left: 1rem;
}
}
@keyframes fireflyFro6 {
0% {
    opacity: 0;
    top: 0;
    left: 0rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -5.5rem;
    left: 1rem;
}
}
@-webkit-keyframes fireflyFro7 {
0% {
    opacity: 0;
    top: 0;
    left: 0.05rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -6rem;
    left: 2rem;
}
}
@keyframes fireflyFro7 {
0% {
    opacity: 0;
    top: 0;
    left: 0.05rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -6rem;
    left: 2rem;
}
}
@-webkit-keyframes fireflyFro8 {
0% {
    opacity: 0;
    top: 0;
    left: 0.05rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -4rem;
    left: 5rem;
}
}
@keyframes fireflyFro8 {
0% {
    opacity: 0;
    top: 0;
    left: 0.05rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -4rem;
    left: 5rem;
}
}
@-webkit-keyframes fireflyFro9 {
0% {
    opacity: 0;
    top: 0;
    left: -0.15rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -4.5rem;
    left: -5rem;
}
}
@keyframes fireflyFro9 {
0% {
    opacity: 0;
    top: 0;
    left: -0.15rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -4.5rem;
    left: -5rem;
}
}
@-webkit-keyframes fireflyFro10 {
0% {
    opacity: 0;
    top: 0;
    left: -0.2rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -4rem;
    left: -6rem;
}
}
@keyframes fireflyFro10 {
0% {
    opacity: 0;
    top: 0;
    left: -0.2rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -4rem;
    left: -6rem;
}
}
@-webkit-keyframes fireflyFro11 {
0% {
    opacity: 0;
    top: 0;
    left: -0.1rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -3rem;
    left: -6rem;
}
}
@keyframes fireflyFro11 {
0% {
    opacity: 0;
    top: 0;
    left: -0.1rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -3rem;
    left: -6rem;
}
}
@-webkit-keyframes fireflyFro12 {
0% {
    opacity: 0;
    top: 0;
    left: 0.1rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -3rem;
    left: 5.5rem;
}
}
@keyframes fireflyFro12 {
0% {
    opacity: 0;
    top: 0;
    left: 0.1rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -3rem;
    left: 5.5rem;
}
}
@-webkit-keyframes fireflyFro13 {
0% {
    opacity: 0;
    top: 0;
    left: 0.05rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -3.5rem;
    left: 5rem;
}
}
@keyframes fireflyFro13 {
0% {
    opacity: 0;
    top: 0;
    left: 0.05rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -3.5rem;
    left: 5rem;
}
}
@-webkit-keyframes fireflyFro14 {
0% {
    opacity: 0;
    top: 0;
    left: -0.1rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -3.8rem;
    left: -5rem;
}
}
@keyframes fireflyFro14 {
0% {
    opacity: 0;
    top: 0;
    left: -0.1rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -3.8rem;
    left: -5rem;
}
}
@-webkit-keyframes fireflyFro15 {
0% {
    opacity: 0;
    top: 0;
    left: -0.1rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -5.1rem;
    left: 3.5rem;
}
}
@keyframes fireflyFro15 {
0% {
    opacity: 0;
    top: 0;
    left: -0.1rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -5.1rem;
    left: 3.5rem;
}
}
@-webkit-keyframes fireflyFro16 {
0% {
    opacity: 0;
    top: 0;
    left: -0.1rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -3.8rem;
    left: -3rem;
}
}
@keyframes fireflyFro16 {
0% {
    opacity: 0;
    top: 0;
    left: -0.1rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -3.8rem;
    left: -3rem;
}
}
@-webkit-keyframes fireflyFro17 {
0% {
    opacity: 0;
    top: 0;
    left: 0.05rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -6rem;
    left: 0.2rem;
}
}
@keyframes fireflyFro17 {
0% {
    opacity: 0;
    top: 0;
    left: 0.05rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -6rem;
    left: 0.2rem;
}
}
@-webkit-keyframes fireflyFro18 {
0% {
    opacity: 0;
    top: 0;
    left: -0.05rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -6rem;
    left: -0.4rem;
}
}
@keyframes fireflyFro18 {
0% {
    opacity: 0;
    top: 0;
    left: -0.05rem;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -6rem;
    left: -0.4rem;
}
}
@-webkit-keyframes fireflyFro19 {
0% {
    opacity: 0;
    top: 0;
    left: 0;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -3rem;
    left: -0.3rem;
}
}
@keyframes fireflyFro19 {
0% {
    opacity: 0;
    top: 0;
    left: 0;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -3rem;
    left: -0.3rem;
}
}
@-webkit-keyframes fireflyFro20 {
0% {
    opacity: 0;
    top: 0;
    left: 0;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -3rem;
    left: 0.3rem;
}
}
@keyframes fireflyFro20 {
0% {
    opacity: 0;
    top: 0;
    left: 0;
}
5% {
    opacity: 1;
}
95% {
    opacity: 1;
}
100% {
    opacity: 0;
    top: -3rem;
    left: 0.3rem;
}
}
.shujuzhili-middle .universe .title {
  position: absolute;
  top: 1.8rem;
  left: 50%;
  z-index: 10;
  margin-left: -3.6rem;
  width: 7.2rem;
  height: 7.2rem;
  background: url(/static/img/shujuzhili-universe-title.482b1ac.png) no-repeat center;
  background-size: 7.2rem 7.2rem;
  -webkit-animation: shujuzhiliTitle 3s ease-in infinite;
          animation: shujuzhiliTitle 3s ease-in infinite;
}
@-webkit-keyframes shujuzhiliTitle {
0%,
  100% {
    margin-top: 0;
}
50% {
    margin-top: 0.2rem;
}
}
@keyframes shujuzhiliTitle {
0%,
  100% {
    margin-top: 0;
}
50% {
    margin-top: 0.2rem;
}
}
.shujuzhili-middle .universe .title:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  margin: -3.15rem 0 0 -3.15rem;
  width: 6.3rem;
  height: 6.3rem;
  background: url() no-repeat right 0.2rem;
  background-size: 2.32rem 5.68rem;
  -webkit-animation: unAroundr 30s linear infinite;
          animation: unAroundr 30s linear infinite;
}
.shujuzhili-middle .universe .title:after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  margin: -2.9rem 0 0 -2.9rem;
  width: 5.8rem;
  height: 5.8rem;
  background: url(/static/img/shujuzhili-universe-wball2.6e4664f.png) no-repeat center;
  background-size: 5.8rem 5.8rem;
  -webkit-animation: unAroundl 30s linear infinite;
          animation: unAroundl 30s linear infinite;
}
.shujuzhili-middle .universe .title b {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
}
.shujuzhili-middle .universe .title b:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 20;
  margin: -2.08rem 0 0 -2.08rem;
  width: 4.16rem;
  height: 4.16rem;
  background: url(/static/img/shujuzhili-universe-ball1.a49cd06.png) no-repeat center;
  background-size: 4.16rem 4.16rem;
  -webkit-animation: unAroundr 20s linear infinite;
          animation: unAroundr 20s linear infinite;
}
.shujuzhili-middle .universe .title b:after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 20;
  margin: -1.77rem 0 0 -1.77rem;
  width: 3.54rem;
  height: 3.54rem;
  background: url(/static/img/shujuzhili-universe-ball2.dc95665.png) no-repeat center;
  background-size: 3.54rem 3.54rem;
  -webkit-animation: unAroundl 10s linear infinite;
          animation: unAroundl 10s linear infinite;
}
.shujuzhili-middle .universe .title i {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  width: 100%;
  height: 100%;
}
.shujuzhili-middle .universe .title i:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 30;
  margin: -2.48rem 0 0 -2.48rem;
  width: 4.96rem;
  height: 4.96rem;
  background: url(/static/img/shujuzhili-universe-bod.0f496e1.png) no-repeat center;
  background-size: 4.96rem 4.96rem;
  -webkit-animation: unAroundz 10s linear infinite;
          animation: unAroundz 10s linear infinite;
}
.shujuzhili-middle .universe .title i:after {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 30;
  margin: -1.6rem 0 0 -1.6rem;
  width: 3.2rem;
  height: 3.2rem;
  background: rgba(32, 19, 126, 0.3);
  border: #55abfd 0.02rem solid;
  border-radius: 3.2rem;
  -webkit-box-shadow: 0 0 0.8rem #2580eb, 0 0 0.5rem #2580eb, 0 0 0.3rem #2580eb;
          box-shadow: 0 0 0.8rem #2580eb, 0 0 0.5rem #2580eb, 0 0 0.3rem #2580eb;
}
@-webkit-keyframes unAroundr {
0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
}
}
@keyframes unAroundr {
0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
}
}
@-webkit-keyframes unAroundl {
0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
}
}
@keyframes unAroundl {
0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
}
}
@-webkit-keyframes unAroundz {
0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
5% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}
50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}
55%,
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
}
}
@keyframes unAroundz {
0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
5% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}
50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}
55%,
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
}
}
.shujuzhili-middle .universe .title h4 {
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  z-index: 40;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 0.48rem;
  color: #fff;
  line-height: 1rem;
  text-align: center;
}
.shujuzhili-middle .universe .view li {
  position: absolute;
  z-index: 5;
  margin-left: -2.78rem;
  width: 5.56rem;
  height: 3.79rem;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  background: url(/static/img/shujuzhili-universe-view.2bb4fa5.png) no-repeat center;
  background-size: 5.55rem 3.79rem;
}
.shujuzhili-middle .universe .view li:nth-child(1) {
  top: 8.2rem;
  left: 11.5rem;
  z-index: 50;
}
.shujuzhili-middle .universe .view li:nth-child(1):before {
  opacity: 1;
  -webkit-animation: shujuzhiliViewLight 2s linear, shujuzhiliViewLight2 2s linear infinite;
          animation: shujuzhiliViewLight 2s linear, shujuzhiliViewLight2 2s linear infinite;
}
@-webkit-keyframes shujuzhiliViewLight {
0% {
    left: -1rem;
    opacity: 0;
}
70% {
    left: 1.5rem;
}
100% {
    left: 0.7rem;
    opacity: 1;
}
}
@keyframes shujuzhiliViewLight {
0% {
    left: -1rem;
    opacity: 0;
}
70% {
    left: 1.5rem;
}
100% {
    left: 0.7rem;
    opacity: 1;
}
}
@-webkit-keyframes shujuzhiliViewLight2 {
0%,
  100% {
    opacity: 0;
}
50% {
    opacity: 1;
}
}
@keyframes shujuzhiliViewLight2 {
0%,
  100% {
    opacity: 0;
}
50% {
    opacity: 1;
}
}
.shujuzhili-middle .universe .view li:nth-child(1):after {
  width: 1.72rem;
  -webkit-animation: shujuzhiliViewLine2 2s linear;
          animation: shujuzhiliViewLine2 2s linear;
}
@-webkit-keyframes shujuzhiliViewLine2 {
0%,
  50% {
    width: 0.08rem;
}
90% {
    width: 1.8rem;
}
100% {
    width: 1.72rem;
}
}
@keyframes shujuzhiliViewLine2 {
0%,
  50% {
    width: 0.08rem;
}
90% {
    width: 1.8rem;
}
100% {
    width: 1.72rem;
}
}
.shujuzhili-middle .universe .view li:nth-child(2) {
  top: 7.2rem;
  left: 17.3rem;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
.shujuzhili-middle .universe .view li:nth-child(3) {
  top: 4.7rem;
  left: 21.5rem;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}
.shujuzhili-middle .universe .view li:nth-child(4) {
  top: 3.5rem;
  left: 17.2rem;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
.shujuzhili-middle .universe .view li:nth-child(5) {
  top: 3.5rem;
  left: 5.8rem;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
.shujuzhili-middle .universe .view li:nth-child(6) {
  top: 4.7rem;
  left: 1.56rem;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}
.shujuzhili-middle .universe .view li:nth-child(7) {
  top: 7.2rem;
  left: 5.7rem;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-animation: shujuzhiliView7 0.5s;
          animation: shujuzhiliView7 0.5s;
}
@-webkit-keyframes shujuzhiliView7 {
0% {
    top: 8.2rem;
    left: 11.5rem;
    -webkit-transform: scale(1);
            transform: scale(1);
}
100% {
    top: 7.2rem;
    left: 5.7rem;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
}
}
@keyframes shujuzhiliView7 {
0% {
    top: 8.2rem;
    left: 11.5rem;
    -webkit-transform: scale(1);
            transform: scale(1);
}
100% {
    top: 7.2rem;
    left: 5.7rem;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
}
}
.shujuzhili-middle .universe .view li:nth-child(7):before {
  opacity: 0;
  -webkit-animation: shujuzhiliViewLightb 0.5s linear;
          animation: shujuzhiliViewLightb 0.5s linear;
}
@-webkit-keyframes shujuzhiliViewLightb {
0% {
    left: 0.7rem;
    opacity: 1;
}
100% {
    left: -1rem;
    opacity: 0;
}
}
@keyframes shujuzhiliViewLightb {
0% {
    left: 0.7rem;
    opacity: 1;
}
100% {
    left: -1rem;
    opacity: 0;
}
}
.shujuzhili-middle .universe .view li:nth-child(7):after {
  width: 0.08rem;
  -webkit-animation: shujuzhiliViewLine2b 0.5s linear;
          animation: shujuzhiliViewLine2b 0.5s linear;
}
@-webkit-keyframes shujuzhiliViewLine2b {
0% {
    width: 1.72rem;
}
100% {
    width: 0.08rem;
}
}
@keyframes shujuzhiliViewLine2b {
0% {
    width: 1.72rem;
}
100% {
    width: 0.08rem;
}
}
.shujuzhili-middle .universe .view li h4 {
  font-size: 0.6rem;
  margin: 0;
  font-weight: normal;
  color: #16d7fb;
  line-height: 1rem;
  text-align: center;
  padding-top: 1rem;
}
.shujuzhili-middle .universe .view li h4 strong {
  font-size: 0.8rem;
  margin-right: 0.2rem;
}
.shujuzhili-middle .universe .view li h5 {
  font-size: 0.48rem;
  font-weight: normal;
  color: #16d7fb;
  line-height: 1rem;
  text-align: center;
}
.shujuzhili-middle .universe .view li:before {
  display: block;
  content: "";
  position: absolute;
  bottom: -0.33rem;
  left: 0.7rem;
  width: 2.12rem;
  height: 0.7rem;
  background: url(/static/img/shujuzhili-universe-light.d79acb5.png) no-repeat center;
  background-size: 2.12rem 0.7rem;
  opacity: 0;
}
.shujuzhili-middle .universe .view li:after {
  display: block;
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.08rem;
  height: 0.1rem;
  background: url() no-repeat left center;
  background-size: 1.72rem 0.1rem;
}
.shujuzhili-middle .bottom-view {
  text-align: center;
  padding-top: 0.5rem;
}
.shujuzhili-middle .bottom-view li {
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 3.98rem;
  height: 2.83rem;
  background: url() no-repeat center;
  background-size: 3.98rem 2.83rem;
  margin: 0 0.4rem;
  padding-top: 0.6rem;
}
.shujuzhili-middle .bottom-view li h4 {
  font-size: 0.48rem;
  font-weight: normal;
  color: #fff;
  line-height: 0.8rem;
  text-align: center;
}
.shujuzhili-middle .bottom-view li h4 strong {
  font-size: 0.56rem;
  margin-right: 0.2rem;
}

.shujuzhili-follow-card {
  position: relative;
  width: 27.5rem;
  height: 22.5rem;
  margin: 0 auto;
}
.shujuzhili-follow-card li {
  position: absolute;
  top: -5rem;
  left: 2.125rem;
  z-index: 20;
  width: 23.35rem;
  height: 13.825rem;
  background: url(/static/img/follow-card.7cf86c3.png) no-repeat center;
  background-size: 23.35rem 13.875rem;
  -webkit-transform: scale(0.1);
          transform: scale(0.1);
  opacity: 0;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.shujuzhili-follow-card li.view {
  top: 8.25rem;
  left: 2.075rem;
  z-index: 50;
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.shujuzhili-follow-card li.prev,
.shujuzhili-follow-card li.next {
  z-index: 40;
  top: 1.75rem;
  -webkit-transform: scale(0.55);
          transform: scale(0.55);
  opacity: 0.7;
}
.shujuzhili-follow-card li.prev {
  left: -5rem;
}
.shujuzhili-follow-card li.next {
  left: 9.25rem;
}
.shujuzhili-follow-card li.prev2nd,
.shujuzhili-follow-card li.next2nd {
  z-index: 30;
  top: -1.5rem;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0.4;
}
.shujuzhili-follow-card li.prev2nd {
  left: -4rem;
}
.shujuzhili-follow-card li.next2nd {
  left: 8.25rem;
}
.shujuzhili-follow-card li b {
  position: absolute;
  right: 2.5rem;
  bottom: 1.25rem;
  font-size: 1rem;
  color: #ffd200;
  line-height: 1.75rem;
}
.shujuzhili-follow-card li table {
  width: 80%;
  margin: 1.5rem auto 0 auto;
}
.shujuzhili-follow-card li table th {
  width: 40%;
  font-size: 0.9rem;
  font-weight: normal;
  color: blue;
  line-height: 1.35rem;
  text-align: right;
  padding: 0.75rem 0.25rem;
  vertical-align: top;
}
.shujuzhili-follow-card li table td {
  width: 60%;
  font-size: 0.9rem;
  color: #ffd200;
  line-height: 1.35rem;
  white-space: normal;
  padding: 0.75rem 0.25rem;
  vertical-align: top;
}

.multilateral.bga {
  background: url() no-repeat center / 27.5rem;
}
.multilateral .thistitl {
  font-size: 1rem;
  color: #fff;
  line-height: 1.5rem;
  padding-left: 3.25rem;
  padding-top: 0.5rem;
}
.multilateral .f-top {
  font-size: 1rem;
  line-height: 2rem;
  padding-top: 0.5rem;
}
.multilateral .f-middle {
  font-size: 1.3rem;
  line-height: 2.5rem;
}
.multilateral .f-bottom {
  line-height: 2.5rem;
}
.multilateral .f-bottom p {
  display: inline-block !important;
  font-size: 1rem;
}
.multilateral.antm {
  -webkit-animation: antm 0.3s ease-in;
          animation: antm 0.3s ease-in;
}
@-webkit-keyframes antm {
0% {
    opacity: 0;
    -webkit-transform: scale(0.1, 0.1);
            transform: scale(0.1, 0.1);
}
100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
}
}
@keyframes antm {
0% {
    opacity: 0;
    -webkit-transform: scale(0.1, 0.1);
            transform: scale(0.1, 0.1);
}
100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
}
}

.wioc-ball {
  background: #020322;
}
.yiwang-middle {
  cursor: pointer;
  position: relative;
  height: 26rem;
  width: 42rem;
  background: url(/static/img/yiwang-mid-bg.2970246.png) no-repeat center bottom;
  background-size: 50rem;
  -webkit-animation: cwAnm 1.5s linear;
          animation: cwAnm 1.5s linear;
}
@-webkit-keyframes cwAnm {
0%,
  30% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 0;
}
85% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 1;
}
100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
}
}
@keyframes cwAnm {
0%,
  30% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 0;
}
85% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 1;
}
100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
}
}
.yiwang-middle .bench {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 42.96rem;
  height: 18.32rem;
  background: url(/static/img/yiwang-mid-plant.e086bac.png) no-repeat center;
  background-size: 42.96rem;
}
.yiwang-middle .bench .circle1,
.yiwang-middle .bench .circle2,
.yiwang-middle .bench .circle3,
.yiwang-middle .bench .circle4,
.yiwang-middle .bench .circle5 {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: perspective(80rem) rotatex(71.5deg);
          transform: perspective(80rem) rotatex(71.5deg);
}
.yiwang-middle .bench .circle1:before,
.yiwang-middle .bench .circle2:before,
.yiwang-middle .bench .circle3:before,
.yiwang-middle .bench .circle4:before,
.yiwang-middle .bench .circle5:before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.yiwang-middle .bench .circle1 {
  width: 38.76rem;
  height: 38.76rem;
  margin: -13.4rem 0 0 -19.38rem;
}
.yiwang-middle .bench .circle1:before {
  background: url(/static/img/yiwang-mid-circle1.48bc406.png) no-repeat center;
  border: #1f9ebe 2px solid;
  background-size: 38rem;
  -webkit-animation: circleReverse 40s linear infinite;
          animation: circleReverse 40s linear infinite;
}
.yiwang-middle .bench .circle2 {
  width: 31.64rem;
  height: 31.64rem;
  margin: -9.12rem 0 0 -15.5rem;
}
.yiwang-middle .bench .circle2:before {
  background: url(/static/img/yiwang-mid-circle2.2c662d5.png) no-repeat center;
  background-size: 29rem;
  -webkit-animation: circleForward 10s linear infinite;
          animation: circleForward 10s linear infinite;
}
.yiwang-middle .bench .circle3 {
  width: 20.52rem;
  height: 20.52rem;
  margin: -4rem 0 0 -10.2rem;
}
.yiwang-middle .bench .circle3:before {
  background: url(/static/img/yiwang-mid-circle3.04d2fe7.png) no-repeat center;
  border: #1f9ebe 2px solid;
  background-size: 21rem;
  -webkit-animation: circleForward 20s linear infinite;
          animation: circleForward 20s linear infinite;
}
.yiwang-middle .bench .circle4 {
  width: 15.4rem;
  height: 15.4rem;
  margin: -1.6rem 0 0 -7.7rem;
}
.yiwang-middle .bench .circle4:before {
  background: url(/static/img/yiwang-mid-circle4.f923261.png) no-repeat left bottom;
  background-size: 10rem;
  -webkit-animation: circleReverse 10s linear infinite;
          animation: circleReverse 10s linear infinite;
}
.yiwang-middle .bench .circle5 {
  width: 8.08rem;
  height: 8.08rem;
  margin: 1.8rem 0 0 -4rem;
}
.yiwang-middle .bench .circle5:before {
  background: url(/static/img/yiwang-mid-circle5.84d7e15.png) no-repeat center;
  -webkit-animation: circleForward 10s linear infinite;
          animation: circleForward 10s linear infinite;
  background-size: 7rem;
}
.yiwang-middle .bench .circle5:after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 9rem;
  height: 9rem;
  border: #fff 2px solid;
  border-radius: 50%;
}
@-webkit-keyframes circleForward {
0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
}
}
@keyframes circleForward {
0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
}
}
@-webkit-keyframes circleReverse {
0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
}
}
@keyframes circleReverse {
0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
}
}
.yiwang-middle .bench ul li {
  position: absolute;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 10rem;
  height: 10rem;
  background: url(/static/img/yiwang-mid-data-ball.477f50f.png) no-repeat center;
  background-size: 100%;
  padding-top: 0px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.yiwang-middle .bench ul li:nth-child(1) {
  top: 4rem;
  left: 15rem;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-animation: yiwangDataSus 3s ease-in infinite;
          animation: yiwangDataSus 3s ease-in infinite;
}
.yiwang-middle .bench ul li:nth-child(1):before {
  -webkit-animation: yiwangData1 30s linear infinite;
          animation: yiwangData1 30s linear infinite;
}
@-webkit-keyframes yiwangData1 {
0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
}
}
@keyframes yiwangData1 {
0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
}
}
.yiwang-middle .bench ul li:nth-child(1):after {
  -webkit-animation: yiwangData2 40s linear infinite;
          animation: yiwangData2 40s linear infinite;
}
@-webkit-keyframes yiwangData2 {
0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
}
}
@keyframes yiwangData2 {
0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
}
}
.yiwang-middle .bench ul li:nth-child(2) {
  top: -1rem;
  left: 32rem;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-animation: yiwangDataSus 3s ease-in infinite 1.5s;
          animation: yiwangDataSus 3s ease-in infinite 1.5s;
}
.yiwang-middle .bench ul li:nth-child(3) {
  top: -7rem;
  left: 25rem;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
  -webkit-animation: yiwangDataSus 3s ease-in infinite;
          animation: yiwangDataSus 3s ease-in infinite;
}
.yiwang-middle .bench ul li:nth-child(4) {
  top: -7rem;
  left: 9rem;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
  -webkit-animation: yiwangDataSus 3s ease-in infinite 1.5s;
          animation: yiwangDataSus 3s ease-in infinite 1.5s;
}
.yiwang-middle .bench ul li:nth-child(5) {
  top: -1rem;
  left: 1rem;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-animation: yiwangData5 0.5s, yiwangDataSus 3s ease-in infinite;
          animation: yiwangData5 0.5s, yiwangDataSus 3s ease-in infinite;
}
@-webkit-keyframes yiwangData5 {
0% {
    top: 4rem;
    left: 15rem;
    -webkit-transform: scale(1);
            transform: scale(1);
}
100% {
    top: -1rem;
    left: 1rem;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
}
}
@keyframes yiwangData5 {
0% {
    top: 4rem;
    left: 15rem;
    -webkit-transform: scale(1);
            transform: scale(1);
}
100% {
    top: -1rem;
    left: 1rem;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
}
}
@-webkit-keyframes yiwangDataSus {
0%,
  100% {
    margin-top: 0;
}
50% {
    margin-top: 20px;
}
}
@keyframes yiwangDataSus {
0%,
  100% {
    margin-top: 0;
}
50% {
    margin-top: 20px;
}
}
.yiwang-middle .bench ul li:before,
.yiwang-middle .bench ul li:after {
  display: block;
  content: "";
  width: 9.5rem;
  height: 9.5rem;
  background: url(/static/img/yiwang-mid-data-gear.f43d611.png) no-repeat center / 100%;
  position: absolute;
  background-size: 9rem;
  top: 50%;
  left: 50%;
}
.yiwang-middle .bench ul li:before {
  width: 11rem;
  height: 11rem;
  margin: -5.5rem 0 0 -5.5rem;
  background-size: 11rem;
}
.yiwang-middle .bench ul li:after {
  width: 410px;
  height: 410px;
  margin: -205px 0 0 -205px;
}
.yiwang-middle .bench ul li h4 {
  font-size: 2rem;
  font-weight: normal;
  color: #fff;
  line-height: 7rem;
  text-align: center;
  text-shadow: 0 5px 5px #000;
  margin: 0px;
}
.yiwang-middle .bench ul li h5 {
  font-size: 2rem;
  font-weight: normal;
  color: #fff;
  line-height: 0rem;
  text-align: center;
  text-shadow: 0 5px 5px #000;
}
/*
*   球2
*/
.yiwang-overview {
  position: relative;
  width: 38rem;
  height: 22rem;
  background: url(/static/img/yiwang-overview-plate.0e4f2b0.png) no-repeat center 9rem;
  margin: 0 auto;
  padding-top: 3.5rem;
}
.yiwang-overview h4 {
  width: 10rem;
  height: 10rem;
  background: url(/static/img/yiwang-overview-earth.3c37b1e.png) no-repeat center 1rem;
  font-size: 2rem;
  background-size: 9rem;
  font-weight: normal;
  color: #fff;
  line-height: 12rem;
  text-align: center;
  text-shadow: 0 3px 2px #7fb1e4;
  margin: 2rem auto 0 auto;
  -webkit-animation: yiwangcircle2 3s ease-in infinite;
          animation: yiwangcircle2 3s ease-in infinite;
}
.yiwang-overview h4 strong {
  font-size: 2.3rem;
  margin-right: 0.3rem;
}
@-webkit-keyframes yiwangcircle2 {
0%,
  100% {
    margin-top: 30px;
}
50% {
    margin-top: 50px;
}
}
@keyframes yiwangcircle2 {
0%,
  100% {
    margin-top: 30px;
}
50% {
    margin-top: 50px;
}
}
.yiwang-overview h5 {
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 1.8rem;
  font-weight: normal;
  color: #fff;
  line-height: 5rem;
  text-align: center;
}
.yiwang-overview ul li {
  position: absolute;
  font-size: 1.5rem;
  color: #fff;
  line-height: 0px;
}
.yiwang-overview ul li:nth-child(1) {
  top: 0.8rem;
  left: 4rem;
}
.yiwang-overview ul li:nth-child(1):before {
  top: 8.2rem;
  left: 6.5rem;
  -webkit-animation: overviewLight 8s linear infinite;
          animation: overviewLight 8s linear infinite;
}
.yiwang-overview ul li:nth-child(2) {
  top: 0.8rem;
  left: 29rem;
}
.yiwang-overview ul li:nth-child(2):before {
  top: 8rem;
  left: -2rem;
  -webkit-animation: overviewLight 8s linear infinite 2s;
          animation: overviewLight 8s linear infinite 2s;
}
.yiwang-overview ul li:nth-child(3) {
  top: 10rem;
  left: -3.25rem;
}
.yiwang-overview ul li:nth-child(3):before {
  top: 8.4rem;
  left: 6rem;
  -webkit-animation: overviewLight 8s linear infinite 4s;
          animation: overviewLight 8s linear infinite 4s;
}
.yiwang-overview ul li:nth-child(4) {
  top: 10rem;
  left: 36.8rem;
}
.yiwang-overview ul li:nth-child(4):before {
  top: 8.2rem;
  left: -2rem;
  -webkit-animation: overviewLight 8s linear infinite 6s;
          animation: overviewLight 8s linear infinite 6s;
}
@-webkit-keyframes overviewLight {
0%,
  25% {
    background-color: #76b9ff;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-box-shadow: 0 0 20px #9ac6ff;
            box-shadow: 0 0 20px #9ac6ff;
}
12.5% {
    background-color: #fff;
    -webkit-box-shadow: 0 0 20px #fff;
            box-shadow: 0 0 20px #fff;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
}
}
@keyframes overviewLight {
0%,
  25% {
    background-color: #76b9ff;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-box-shadow: 0 0 20px #9ac6ff;
            box-shadow: 0 0 20px #9ac6ff;
}
12.5% {
    background-color: #fff;
    -webkit-box-shadow: 0 0 20px #fff;
            box-shadow: 0 0 20px #fff;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
}
}
.yiwang-overview ul li:before {
  display: block;
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #76b9ff;
  border: #0066e9 3px solid;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 20px #9ac6ff;
          box-shadow: 0 0 20px #9ac6ff;
}
.yiwang-overview ul li h6 {
  font-size: 1.5rem;
  font-weight: normal;
  color: #fff;
  line-height: 5rem;
  white-space: nowrap;
  margin: 4rem 0px 0px;
}
.yiwang-overview ul li strong {
  color: #00c3ff;
  margin-right: 10px;
}
